<template>
  <div>
    <el-container>
      <el-header>
        <span>我的简历</span>
      </el-header>
    </el-container>
    <div class="graduate-info">
      <el-descriptions title="简历描述">
        <template slot="extra">
          <el-button
            type="warning"
            size="small"
            class="update-button"
            @click="dialogFormVisible = true"
            >填写简历</el-button
          >
          <el-button
            type="primary"
            size="small"
            class="update-button"
            @click="dialogUpdateFormVisible = true"
            >更新</el-button
          >
        </template>
        <el-descriptions-item label="你的名称">{{
          resumeForm.gname
        }}</el-descriptions-item>
        <el-descriptions-item label="你的年龄">{{
          resumeForm.age
        }}</el-descriptions-item>
        <el-descriptions-item label="你的性别">{{
          resumeForm.sex
        }}</el-descriptions-item>
        <el-descriptions-item label="就读院校">{{
          resumeForm.schoolname
        }}</el-descriptions-item>
        <el-descriptions-item label="学历水平">{{
          resumeForm.education
        }}</el-descriptions-item>
        <el-descriptions-item label="家庭住址">{{
          resumeForm.address
        }}</el-descriptions-item>
        <el-descriptions-item label="意向城市">{{
          resumeForm.city
        }}</el-descriptions-item>
        <el-descriptions-item label="目前身份">{{
          resumeForm.identify
        }}</el-descriptions-item>
        <el-descriptions-item label="意向岗位">{{
          resumeForm.position
        }}</el-descriptions-item>
        <el-descriptions-item label="期望薪资">{{
          resumeForm.salary
        }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">
          <el-date-picker
            v-model="resumeForm.birthday"
            readonly
            type="date"
            placeholder="无"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="你的邮箱">{{
          resumeForm.email
        }}</el-descriptions-item>
        <el-descriptions-item label="个人优势">{{
          resumeForm.advantage
        }}</el-descriptions-item>
      </el-descriptions>
      <!-- 填写简历对话框 -->
      <el-dialog
        title="填写简历"
        :visible.sync="dialogFormVisible"
        :modal="false"
        append-to-body
      >
        <el-form :model="resumeAddForm" :inline="true">
          <el-form-item label="你的名称" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.gname"
              placeholder="输入你的名称"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的年龄" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.age"
              placeholder="你的年龄"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的性别" :label-width="formLabelWidth">
            <el-radio-group v-model="resumeAddForm.sex" style="width: 180px">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="resumeAddForm.birthday"
              style="width: 180px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="就读学校" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.schoolname"
              placeholder="毕业院校名称"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历水平" :label-width="formLabelWidth">
            <el-select
              v-model="resumeAddForm.education"
              placeholder="请选择学历水平"
              style="width: 180px"
            >
              <el-option label="普通本科" value="普通本科"></el-option>
              <el-option label="211本科" value="211本科"></el-option>
              <el-option label="985本科" value="985本科"></el-option>
              <el-option label="普通硕士" value="普通硕士"></el-option>
              <el-option label="211硕士" value="211硕士"></el-option>
              <el-option label="985硕士" value="985硕士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭地址" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.address"
              placeholder="家庭地址"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="意向城市" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.city"
              placeholder="意向城市"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="目前身份" :label-width="formLabelWidth">
            <el-select
              v-model="resumeAddForm.identify"
              placeholder="请选择目前身份"
              style="width: 180px"
            >
              <el-option label="在校生" value="在校生"></el-option>
              <el-option label="应届生" value="应届生"></el-option>
              <el-option label="毕业生" value="毕业生"></el-option>
              <el-option label="已就业" value="已就业"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意向岗位" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.position"
              placeholder="你最想从事什么职业"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="期望薪资" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.salary"
              placeholder="你最期待的薪资"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.email"
              placeholder="你的邮箱地址"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的优势" :label-width="formLabelWidth">
            <el-input
              v-model="resumeAddForm.advantage"
              type="textarea"
              placeholder="展示你的优势"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addResume">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 更新简历对话框 -->
      <el-dialog
        title="填写简历"
        :visible.sync="dialogUpdateFormVisible"
        :modal="false"
        append-to-body
      >
        <el-form :model="resumeForm" :inline="true">
          <el-form-item label="你的名称" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.gname"
              placeholder="输入你的名称"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的年龄" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.age"
              placeholder="你的年龄"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的性别" :label-width="formLabelWidth">
            <el-radio-group v-model="resumeForm.sex" style="width: 180px">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="resumeAddForm.birthday"
              style="width: 180px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="就读学校" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.schoolname"
              placeholder="毕业院校名称"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历水平" :label-width="formLabelWidth">
            <el-select
              v-model="resumeForm.education"
              placeholder="请选择学历水平"
              style="width: 180px"
            >
              <el-option label="普通本科" value="普通本科"></el-option>
              <el-option label="211本科" value="211本科"></el-option>
              <el-option label="985本科" value="985本科"></el-option>
              <el-option label="普通硕士" value="普通硕士"></el-option>
              <el-option label="211硕士" value="211硕士"></el-option>
              <el-option label="985硕士" value="985硕士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭地址" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.address"
              placeholder="家庭地址"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="意向城市" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.city"
              placeholder="意向城市"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="目前身份" :label-width="formLabelWidth">
            <el-select
              v-model="resumeForm.identify"
              placeholder="请选择目前身份"
              style="width: 180px"
            >
              <el-option label="在校生" value="在校生"></el-option>
              <el-option label="应届生" value="应届生"></el-option>
              <el-option label="毕业生" value="毕业生"></el-option>
              <el-option label="已就业" value="已就业"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意向岗位" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.position"
              placeholder="你最想从事什么职业"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="期望薪资" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.salary"
              placeholder="你最期待的薪资"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.email"
              placeholder="你的邮箱地址"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的优势" :label-width="formLabelWidth">
            <el-input
              v-model="resumeForm.advantage"
              type="textarea"
              placeholder="展示你的优势"
              autocomplete="off"
              style="width: 180px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateResume">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-container>
      <el-footer>
        <div>
          <span>专注于互联网校招</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "RecommendResume",

  data() {
    return {
      resumeForm: {
        rid: 0,
        gid: 0,
        gname: "",
        schoolname: "",
        education: "",
        address: "",
        city: "",
        email: "",
        identify: "",
        advantage: "",
        position: "",
        salary: 0,
        sex: "",
        age: 0,
        birthday: new Date(),
      },
      resumeAddForm: {
        gid: 0,
        gname: "",
        schoolname: "",
        education: "",
        address: "",
        city: "",
        email: "",
        identify: "",
        advantage: "",
        position: "",
        salary: 0,
        sex: "",
        age: 0,
        birthday: new Date(),
      },
      dialogFormVisible: false,
      dialogUpdateFormVisible: false,
      formLabelWidth: "120px",
    };
  },

  mounted() {
    this.loadData();
  },

  watch: {
    "resumeForm.rid"(newVal) {
      console.log(newVal);
      if (newVal === 0) {
        this.$notify({
          title: "警告",
          message: "简历未填写,请点击填写简历按钮完善你的简历哦",
          position: "top-left",
          type: "warning",
        });
      }
    },
  },

  methods: {
    loadData() {
      this.$axios
        .post("/resume/queryResumeByGid")
        .then((res) => {
          if (res.data.result != null) {
            this.resumeForm = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 添加简历
    addResume() {
      if (this.resumeForm.gid > 0) {
        this.$message({
          message: "简历已经存在啦",
          type: "error",
        });
        return;
      }
      this.$axios
        .post("/resume/addResume", this.resumeAddForm)
        .then((res) => {
          var response = res.data.desc;
          if (response === "添加失败") {
            this.$message({
              message: "添加简历失败",
              type: "error",
            });
          } else if (response === "添加简历成功") {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.loadData();
            this.dialogFormVisible = false;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 更新简历
    updateResume() {
      this.$axios
        .post("/resume/updateResume", this.resumeForm)
        .then((res) => {
          var response = res.data.desc;
          if (response === "更新失败") {
            this.$message({
              message: "更新失败",
              type: "error",
            });
          } else if (response === "更新成功") {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.loadData();
            this.dialogUpdateFormVisible = false;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: white;
  line-height: 60px;
}

.el-footer {
  background-color: #409eff;
  color: white;
  line-height: 60px;
}

.el-footer div {
  margin-left: 43%;
}

.graduate-info {
  margin-bottom: 10px;
  height: 480px;
  background: whitesmoke;
  background-image: url(https://img2.baidu.com/it/u=2254528714,2812434823&fm=26&fmt=auto);
  background-size: 1355px 480px;
}

.el-descriptions {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.update-button {
  margin-top: 10px;
}
</style>
